<template>
  <div class="profile-page">
    <navigation-bar />

    <!-- Breadcrumb -->
    <div class="breadcrumb">
      <div class="breadcrumb-content">
        <router-link to="/">首页</router-link>
        <span>/</span>
        <span>个人主页</span>
      </div>
    </div>

    <div class="main-container">
      <!-- 左侧：个人信息侧边栏 -->
      <div class="profile-sidebar">
        <div class="profile-header">
          <div class="profile-avatar" @click="triggerAvatarUpload">
            <img v-if="avatarPreview" :src="avatarPreview" alt="用户头像">
            <div v-else class="avatar-placeholder">
              <user-outlined />
            </div>
            <div class="upload-hint">点击更换头像</div>
          </div>
          <input
            ref="avatarInput"
            type="file"
            accept="image/*"
            style="display: none"
            @change="handleAvatarChange"
          >
          <h2 class="profile-name">{{userInfo.username }}</h2>
          <p class="profile-bio">{{ userInfo.bio || '暂无个人简介' }}</p>
        </div>

        <div class="profile-stats">
          <div class="stat-item">
            <div class="stat-value">{{ stats.clothesCount }}</div>
            <div class="stat-label">衣橱单品</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.tryOnCount }}</div>
            <div class="stat-label">搭配方案</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.favoriteCount }}</div>
            <div class="stat-label">收藏数量</div>
          </div>
        </div>

        <div class="profile-menu">
          <a href="#overview" class="menu-item" :class="{ active: activeTab === 'overview' }" @click="activeTab = 'overview'">
            <home-outlined />
            <span>总览</span>
          </a>
          <a href="#profile" class="menu-item" :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
            <user-outlined />
            <span>个人信息</span>
          </a>
          <a href="#settings" class="menu-item" :class="{ active: activeTab === 'settings' }" @click="activeTab = 'settings'">
            <setting-outlined />
            <span>设置</span>
          </a>
        </div>
      </div>

      <!-- 右侧：内容区域 -->
      <div class="content-area">
        <!-- 总览 -->
        <template v-if="activeTab === 'overview'">
          <!-- 穿搭偏好 -->
          <div class="content-card">
            <div class="card-header">
              <h3 class="card-title">穿搭偏好</h3>
              <button class="edit-button" >
                <edit-outlined />
                <span>编辑</span>
              </button>
            </div>
            <div class="style-preferences">
              <div v-for="(tag, index) in styleTags" :key="index" class="style-tag">
                <heart-outlined />
                <span>{{ tag }}</span>
              </div>
            </div>
          </div>

          <!-- 衣橱统计 -->
          <div class="content-card">
            <div class="card-header">
              <h3 class="card-title">衣橱统计</h3>
            </div>
            <div class="wardrobe-stats">
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-tshirt"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ categoryStats.tops }}</div>
                  <div class="stat-description">上衣</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-female"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ categoryStats.dress }}</div>
                  <div class="stat-description">裙装</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-socks"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ categoryStats.pants }}</div>
                  <div class="stat-description">裤装</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-vest"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ categoryStats.coat }}</div>
                  <div class="stat-description">外套</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-shoe-prints"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ categoryStats.shoes }}</div>
                  <div class="stat-description">鞋子</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-clock"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ categoryStats.watch }}</div>
                  <div class="stat-description">手表</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-gem"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ categoryStats.accessories }}</div>
                  <div class="stat-description">装饰</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 最近活动 -->
          <div class="content-card">
            <div class="card-header">
              <h3 class="card-title">最近活动</h3>
            </div>
            <div class="recent-activities">
              <div v-for="(activity, index) in recentActivities" :key="index" class="activity-item">
                <div class="activity-icon">
                  <component :is="activity.icon" />
                </div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>

        <!-- 个人信息 -->
        <template v-if="activeTab === 'profile'">
          <div class="content-card">
            <div class="card-header">
              <h3 class="card-title">个人信息</h3>
              <button class="edit-button" @click="handleSaveProfile">
                <save-outlined />
                <span>保存</span>
              </button>
            </div>
            <div class="profile-form">
              <a-form :model="userInfo" layout="vertical">
                <a-form-item label="用户名">
                  <a-input v-model:value="userInfo.username" />
                </a-form-item>
                <a-form-item label="手机号">
                  <a-input v-model:value="userInfo.phoneNumber" />
                </a-form-item>
                <a-form-item label="邮箱">
                  <a-input v-model:value="userInfo.email" disabled />
                </a-form-item>
                <a-form-item label="个人简介">
                  <a-textarea v-model:value="userInfo.bio" :rows="4" />
                </a-form-item>
              </a-form>
            </div>
          </div>

          <!-- 模特照片 -->
          <div class="content-card">
            <div class="card-header">
              <h3 class="card-title">模特照片</h3>
              <button class="edit-button" @click="triggerModelPhotoUpload">
                <camera-outlined />
                <span>{{ userInfo.modelPhotoUrl ? '更换照片' : '上传照片' }}</span>
              </button>
            </div>
            <div class="model-photo-container" @click="triggerModelPhotoUpload">
              <img v-if="modelPhotoPreview" :src="modelPhotoPreview" alt="模特照片" class="model-photo">
              <div v-else class="model-photo-placeholder">
                <camera-outlined />
                <span>点击上传模特照片</span>
              </div>
              <input
                ref="modelPhotoInput"
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleModelPhotoChange"
              >
            </div>
          </div>
        </template>

        <!-- 设置 -->
        <template v-if="activeTab === 'settings'">
          <div class="content-card">
            <div class="card-header">
              <h3 class="card-title">账号设置</h3>
            </div>
            <div class="settings-form">
              <a-form :model="passwordForm" layout="vertical">
                <a-form-item label="修改密码">
                  <a-input-password v-model:value="passwordForm.newPassword" placeholder="请输入新密码" />
                </a-form-item>
                <a-form-item label="确认密码">
                  <a-input-password v-model:value="passwordForm.confirmPassword" placeholder="请再次输入新密码" />
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" @click="handlePasswordChange">保存修改</a-button>
                </a-form-item>
              </a-form>
            </div>
          </div>
        </template>
      </div>
    </div>

    <page-footer />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import {
  UserOutlined,
  CameraOutlined,
  HomeOutlined,
  SkinOutlined,
  AppstoreOutlined,
  SettingOutlined,
  EditOutlined,
  HeartOutlined,
  SaveOutlined,
  ShoppingOutlined,
  WomanOutlined,
  CoatOutlined,
  BorderOutlined,
  ClockCircleOutlined,
  GiftOutlined
} from '@ant-design/icons-vue'
import NavigationBar from '@/components/layout/NavigationBar.vue'
import PageFooter from '@/components/layout/PageFooter.vue'
import '@/assets/styles/profile.css'
import axios from 'axios'

export default defineComponent({
  name: 'ProfilePage',
  components: {
    UserOutlined,
    CameraOutlined,
    HomeOutlined,
    SkinOutlined,
    AppstoreOutlined,
    SettingOutlined,
    EditOutlined,
    HeartOutlined,
    SaveOutlined,
    ShoppingOutlined,
    WomanOutlined,
    CoatOutlined,
    BorderOutlined,
    ClockCircleOutlined,
    GiftOutlined,
    NavigationBar,
    PageFooter
  },
  setup() {
    const router = useRouter()
    const avatarInput = ref(null)
    const avatarPreview = ref(null)
    const activeTab = ref('overview')
    const userInfo = ref({
      username: '',
      phoneNumber: '',
      email: '',
      bio: '',
      avatarUrl: '',
      age: '',
      gender: '',
      height: '',
      weight: '',
      address: '',
      modelPhotoUrl: ''
    })
    const stats = ref({
      clothesCount: 0,
      tryOnCount: 0,
      favoriteCount: 0
    })
    const categoryStats = ref({
      tops: 0,
      dress: 0,
      pants: 0,
      coat: 0,
      shoes: 0,
      watch: 0,
      accessories: 0
    })
    const styleTags = ref(['简约', '休闲', '文艺', '职场', '运动'])
    const recentActivities = ref([
      {
        icon: SkinOutlined,
        title: '上传了新的衣物：米色针织开衫',
        time: '2小时前'
      },
      {
        icon: AppstoreOutlined,
        title: '生成了新的搭配方案',
        time: '昨天'
      },
      {
        icon: HeartOutlined,
        title: '更新了穿搭偏好',
        time: '2天前'
      }
    ])
    const passwordForm = ref({
      newPassword: '',
      confirmPassword: ''
    })
    const clothesItems = ref([])
    const modelPhotoInput = ref(null)
    const modelPhotoPreview = ref(null)

    const fetchUserInfo = async () => {
      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId) {
          console.error('No userId found in localStorage')
          message.error('用户ID不存在，请重新登录')
          router.push('/login')
          return
        }
        
        if (!token) {
          console.error('No token found in localStorage')
          message.error('登录凭证不存在，请重新登录')
          router.push('/login')
          return
        }

        // 获取用户基本信息
        const userResponse = await axios.get(`/api/users/${userId}`, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })

        // 获取用户详细信息
        const userInfoResponse = await axios.get(`/api/user-info/${userId}`, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })

        if (userResponse.data.success && userInfoResponse.data.success) {
          const userData = userResponse.data.data
          const userInfoData = userInfoResponse.data.data
          
          // 合并两个表的数据
          userInfo.value = {
            username: userData.username || '',
            phoneNumber: userData.phoneNumber || '',
            email: userData.email || '',
            bio: userData.bio || '',
            avatarUrl: userInfoData.avatarUrl || '',
            age: userInfoData.age || '',
            gender: userInfoData.gender || '',
            height: userInfoData.height || '',
            weight: userInfoData.weight || '',
            address: userInfoData.address || '',
            modelPhotoUrl: userInfoData.modelPhotoUrl || ''
          }

          // 如果有头像URL，则显示头像
          if (userInfoData.avatarUrl) {
            avatarPreview.value = `/api/images/${userInfoData.avatarUrl.split('/').pop()}`
          }

          // 如果有模特照片URL，则显示模特照片
          if (userInfoData.modelPhotoUrl) {
            modelPhotoPreview.value = `/api/images/${userInfoData.modelPhotoUrl.split('/').pop()}`
          }
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        message.error('获取用户信息失败')
      }
    }

    const fetchStats = async () => {
      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId || !token) return

        const response = await axios.get(`api/users/${userId}/stats`, {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        })

        if (response.data.success) {
          stats.value = response.data.data
        }
      } catch (error) {
        console.error('获取统计信息失败:', error)
      }
    }

    const fetchClothesList = async () => {
      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId) {
          console.error('No userId found in localStorage')
          message.error('用户ID不存在，请重新登录')
          router.push('/login')
          return
        }
        
        if (!token) {
          console.error('No token found in localStorage')
          message.error('登录凭证不存在，请重新登录')
          router.push('/login')
          return
        }

        const response = await axios.get(`api/clothes/users/${userId}`, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })

        if (response.data.success) {
          clothesItems.value = response.data.data.map(item => ({
            id: item.clothesId || item.id,
            name: item.name,
            categoryId: item.categoryId,
            date: item.createdAt || item.date,
            image: `api/images/${item.imageUrl.split('/').pop()}`,
            description: item.description || ''
          }))
          // 立即更新分类统计
          updateCategoryCounts()
        } else {
          message.error(response.data.errorMsg || '获取衣物列表失败')
        }
      } catch (error) {
        console.error('获取衣物列表失败:', error)
        message.error('获取衣物列表失败，请重试')
      }
    }

    const triggerAvatarUpload = () => {
      avatarInput.value.click()
    }

    const handleAvatarChange = async (event) => {
      const file = event.target.files[0]
      if (!file) return

      // 检查文件类型
      const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg']
      if (!allowedTypes.includes(file.type)) {
        message.error('只支持 JPG、PNG 格式的图片')
        return
      }

      // 检查文件大小（限制为 5MB）
      if (file.size > 5 * 1024 * 1024) {
        message.error('图片大小不能超过 5MB')
        return
      }

      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId || !token) {
          message.error('请先登录')
          router.push('/login')
          return
        }

        const formData = new FormData()
        formData.append('image', file)

        console.log('Uploading avatar with data:', {
          userId,
          fileType: file.type,
          fileSize: file.size,
          formData: Object.fromEntries(formData.entries())
        })

        const response = await axios.post(
          `/api/user-info/${userId}/avatar`,
          formData,
          {
            headers: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'multipart/form-data'
            },
            transformRequest: [(data) => data] // 禁用默认的 JSON 转换
          }
        )

        console.log('Upload response:', response.data)

        if (response.data.success) {
          // 更新头像预览
          const imageName = response.data.data.avatarUrl.split('/').pop()
          avatarPreview.value = `/api/images/${imageName}`
          // 更新用户信息中的头像URL
          userInfo.value.avatarUrl = response.data.data.avatarUrl
          message.success('头像更新成功')
        } else {
          message.error(response.data.errorMsg || '头像更新失败')
        }
      } catch (error) {
        console.error('上传头像失败:', error)
        console.error('Error response:', error.response?.data)
        
        let errorMessage = '上传头像失败'
        if (error.response?.data?.errorMsg) {
          errorMessage = error.response.data.errorMsg
        } else if (error.response?.status === 413) {
          errorMessage = '文件太大，请上传小于 5MB 的图片'
        } else if (error.response?.status === 415) {
          errorMessage = '不支持的文件类型，请上传 JPG 或 PNG 格式的图片'
        } else if (error.code === 'ECONNABORTED') {
          errorMessage = '上传超时，请重试'
        }
        
        message.error(errorMessage)
      }
    }

    const handleSaveProfile = async () => {
      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId || !token) {
          message.error('请先登录')
          router.push('/login')
          return
        }

        const response = await axios.put(
          `/api/users/${userId}`,
          userInfo.value,
          {
            headers: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            }
          }
        )

        if (response.data.success) {
          message.success('保存成功')
        } else {
          message.error(response.data.errorMsg || '保存失败')
        }
      } catch (error) {
        console.error('保存用户信息失败:', error)
        message.error('保存失败')
      }
    }

    const handlePasswordChange = async () => {
      if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
        message.error('两次输入的密码不一致')
        return
      }

      if (passwordForm.value.newPassword.length < 6) {
        message.error('密码长度不能少于6位')
        return
      }

      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId || !token) {
          message.error('请先登录')
          router.push('/login')
          return
        }

        const response = await axios.put(
          `/api/users/${userId}`,
          {
            passwordHash: passwordForm.value.newPassword
          },
          {
            headers: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            }
          }
        )

        if (response.data.success) {
          message.success('密码修改成功')
          passwordForm.value.newPassword = ''
          passwordForm.value.confirmPassword = ''
        } else {
          message.error(response.data.errorMsg || '密码修改失败')
        }
      } catch (error) {
        console.error('修改密码失败:', error)
        message.error(error.response?.data?.errorMsg || '修改密码失败')
      }
    }

    const updateCategoryCounts = () => {
      console.log('Updating category counts with items:', clothesItems.value)
      // 重置统计数据
      categoryStats.value = {
        tops: 0,
        dress: 0,
        pants: 0,
        coat: 0,
        shoes: 0,
        watch: 0,
        accessories: 0
      }

      // 统计每个分类的数量
      clothesItems.value.forEach(item => {
        console.log('Processing item:', item)
        const categoryId = parseInt(item.categoryId)
        switch (categoryId) {
          case 1:
            categoryStats.value.tops++
            break
          case 2:
            categoryStats.value.dress++
            break
          case 3:
            categoryStats.value.pants++
            break
          case 4:
            categoryStats.value.coat++
            break
          case 5:
            categoryStats.value.shoes++
            break
          case 6:
            categoryStats.value.watch++
            break
          case 7:
            categoryStats.value.accessories++
            break
          default:
            console.log('Unknown category ID:', categoryId)
        }
      })

      console.log('Updated category stats:', categoryStats.value)
      // 更新总衣橱数量
      stats.value.clothesCount = clothesItems.value.length
    }

    const triggerModelPhotoUpload = () => {
      modelPhotoInput.value.click()
    }

    const handleModelPhotoChange = async (event) => {
      const file = event.target.files[0]
      if (!file) return

      // 检查文件类型
      if (!file.type.startsWith('image/')) {
        message.error('请选择图片文件')
        return
      }

      // 检查文件大小（限制为 5MB）
      if (file.size > 5 * 1024 * 1024) {
        message.error('图片大小不能超过 5MB')
        return
      }

      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId || !token) {
          message.error('请先登录')
          router.push('/login')
          return
        }

        const formData = new FormData()
        formData.append('image', file)

        console.log('Uploading model photo with data:', {
          userId,
          fileType: file.type,
          fileSize: file.size,
          formData: Object.fromEntries(formData.entries())
        })

        const response = await axios.post(
          `/api/user-info/${userId}/model-photo`,
          formData,
          {
            headers: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'multipart/form-data'
            }
          }
        )

        console.log('Upload response:', response.data)

        if (response.data.success) {
          // 更新模特照片预览
          const imageName = response.data.data.modelPhotoUrl.split('/').pop()
          modelPhotoPreview.value = `/api/images/${imageName}`
          // 更新用户信息中的模特照片URL
          userInfo.value.modelPhotoUrl = response.data.data.modelPhotoUrl
          message.success('模特照片更新成功')
        } else {
          message.error(response.data.errorMsg || '模特照片更新失败')
        }
      } catch (error) {
        console.error('上传模特照片失败:', error)
        console.error('Error response:', error.response?.data)
        message.error(error.response?.data?.errorMsg || '上传模特照片失败')
      }
    }

    // 监听 clothesItems 的变化
    watch(clothesItems, () => {
      updateCategoryCounts()
    }, { immediate: true })

    onMounted(() => {
      fetchUserInfo()
      fetchStats()
      fetchClothesList()
    })

    return {
      avatarInput,
      avatarPreview,
      userInfo,
      stats,
      categoryStats,
      styleTags,
      recentActivities,
      activeTab,
      triggerAvatarUpload,
      handleAvatarChange,
      handleSaveProfile,
      passwordForm,
      handlePasswordChange,
      clothesItems,
      modelPhotoInput,
      modelPhotoPreview,
      triggerModelPhotoUpload,
      handleModelPhotoChange
    }
  }
})
</script>

<style scoped>
.profile-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  cursor: pointer;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
}

.avatar-placeholder :deep(svg) {
  width: 60px;
  height: 60px;
  color: #94a3b8;
}

.upload-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.profile-avatar:hover .upload-hint {
  opacity: 1;
}

.wardrobe-stats {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 8px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 1.5rem;
  color: #3b82f6;
  margin-bottom: 0.5rem;
}

.stat-info {
  text-align: center;
}

.stat-number {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.stat-description {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

@media (max-width: 1024px) {
  .wardrobe-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .wardrobe-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .wardrobe-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.model-photo-container {
  width: 100%;
  height: 200px;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s;
  background-color: #f8fafc;
}

.model-photo-container:hover {
  border-color: #0ea5e9;
}

.model-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 80%;
  max-height: 80%;
  background-color: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.model-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: #94a3b8;
}

.model-photo-placeholder :deep(svg) {
  width: 32px;
  height: 32px;
}

.model-photo-placeholder span {
  font-size: 0.875rem;
  color: #64748b;
}
</style>

